<template>
	<view class="video">
		<view class="video-item">
			<video id="myVideo" :loop="true"
			:src="src"
			 @error="videoErrorCallback">
				<cover-view :style="style">
					 <cover-view class="action" @tap="BackPage" style="height: 100%;margin-left: 15px;align-items:center;">
						<cover-image :style="[{'margin':((CustomBar2-StatusBar)/2-9) + 'px 0'}]" src="../../../static/back.png" style="height: 36upx;width: 36upx;"  lazy-load='true'/>
					 </cover-view>
				</cover-view>
			 </video>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				CustomBar2: this.CustomBar,
				title: 'video',
				src: '',
				isplay:false,
			}
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;box-sizing:border-box;position: absolute;`;
				return style
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.play();
			// #endif
			// #ifdef MP-WEIXIN
			//#endif
		},
		onLoad(event) {
			this.src = decodeURIComponent(event.url);
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="less">
	.video {
		width: 100%;
		height: 100%;
	}
	.video-item{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
		video{
			width: 100%;
			height: 100%;
		}
	}
</style>
